<template>
  <div class="twicePayDetail">
    <el-card class="box-card" v-for="(item,index) in detailList" :key="index">
      <div slot="header" class="clearfix">
        <span>{{ index+1 }}次支付</span>
        <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
      </div>
      <div class="content">
       <div class="item">支付金额: <span style="color: red;"> {{ item.money }}</span></div>
       <div class="item">支付时间: {{ item.pay_time }}</div>
       <div class="item">支付状态: 
        <span v-if="item.status == 0">等待银行回调</span>
        <span v-if="item.status == 1">支付成功</span>
        <span v-if="item.status == 2">支付失败</span>
       </div>
       <div class="item">银行名称: {{ item.name }}</div>
       <div class="item">银行账号: {{ item.yinhang }}</div>
       <div class="item">收款人: {{ item.true_name }}</div>

      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "twicePayDetail",
  props: {
    detailList: {
      default: [],
      type: Array
    }
  },
  data() {
    return {};
  },
  mounted() {
    console.log("detailList", this.detailList);

    this.initial();
  },
  methods: {
    async initial() {}
  }
};
</script>

<style lang="scss" scoped>
.twicePayDetail {
    display: flex;
    justify-content: space-around;
    .box-card{
        width: 48%;
        .content{
            .item{
                margin-bottom: 5px;
            }
        }
    }
}
</style>
